<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>识别历史 - 药品识别系统</title>
    
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    
    <style>
        body {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        
        .navbar {
            background: rgba(255, 255, 255, 0.95) !important;
            backdrop-filter: blur(10px);
            box-shadow: 0 2px 20px rgba(0,0,0,0.1);
        }
        
        .main-container {
            margin-top: 80px;
            padding: 20px;
        }
        
        .card {
            border: none;
            border-radius: 15px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            backdrop-filter: blur(10px);
            background: rgba(255, 255, 255, 0.9);
        }
        
        .btn-primary {
            background: linear-gradient(45deg, #667eea, #764ba2);
            border: none;
            border-radius: 25px;
            padding: 10px 30px;
            transition: all 0.3s ease;
        }
        
        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        }
        
        .history-item {
            transition: all 0.3s ease;
            cursor: pointer;
        }
        
        .history-item:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }
        
        .empty-state {
            text-align: center;
            padding: 60px 20px;
            color: #6c757d;
        }
        
        @media (max-width: 768px) {
            .main-container {
                margin-top: 70px;
                padding: 10px;
            }
        }
    </style>
</head>
<body>
    <!-- Navigation -->
    <nav class="navbar navbar-expand-lg navbar-light fixed-top">
        <div class="container">
            <a class="navbar-brand fw-bold" href="/">
                <i class="fas fa-pills text-primary me-2"></i>药品识别系统
            </a>
            
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="/"><i class="fas fa-home me-1"></i>首页</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/recognition"><i class="fas fa-camera me-1"></i>药品识别</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" href="/history"><i class="fas fa-history me-1"></i>识别历史</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="/drugs"><i class="fas fa-database me-1"></i>药品管理</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- Main Content -->
    <div class="container main-container">
        <div class="row">
            <div class="col-12">
                <div class="card">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h4 class="mb-0">
                            <i class="fas fa-history text-primary me-2"></i>识别历史
                        </h4>
                        <div>
                            <button class="btn btn-outline-danger btn-sm" onclick="clearHistory()">
                                <i class="fas fa-trash me-1"></i>清空历史
                            </button>
                            <a href="/recognition" class="btn btn-primary btn-sm ms-2">
                                <i class="fas fa-plus me-1"></i>新建识别
                            </a>
                        </div>
                    </div>
                    <div class="card-body">
                        <!-- Loading -->
                        <div id="loadingDiv" class="text-center py-4">
                            <div class="spinner-border text-primary" role="status">
                                <span class="visually-hidden">加载中...</span>
                            </div>
                            <p class="mt-2 text-muted">正在加载历史记录...</p>
                        </div>
                        
                        <!-- Empty State -->
                        <div id="emptyState" class="empty-state" style="display: none;">
                            <i class="fas fa-history fa-4x mb-3"></i>
                            <h5>暂无识别记录</h5>
                            <p class="text-muted">开始您的第一次药品识别吧！</p>
                            <a href="/recognition" class="btn btn-primary">
                                <i class="fas fa-camera me-2"></i>开始识别
                            </a>
                        </div>
                        
                        <!-- History List -->
                        <div id="historyList">
                            <!-- 历史记录将通过JavaScript动态加载 -->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <!-- jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    
    <script>
        $(document).ready(function() {
            loadHistory();
        });
        
        function loadHistory() {
            $('#loadingDiv').show();
            $('#emptyState').hide();
            $('#historyList').empty();
            
            $.get('/api/recognition/history')
                .done(function(data) {
                    $('#loadingDiv').hide();
                    
                    if (data.length === 0) {
                        $('#emptyState').show();
                    } else {
                        displayHistory(data);
                    }
                })
                .fail(function() {
                    $('#loadingDiv').hide();
                    showAlert('加载历史记录失败！', 'danger');
                });
        }
        
        function displayHistory(historyData) {
            const historyList = $('#historyList');
            
            historyData.forEach(function(item, index) {
                const historyItem = `
                    <div class="card history-item mb-3" onclick="viewDetails(${item.id})">
                        <div class="card-body">
                            <div class="row align-items-center">
                                <div class="col-md-2 text-center">
                                    <i class="fas fa-image fa-2x text-primary"></i>
                                </div>
                                <div class="col-md-6">
                                    <h6 class="mb-1">识别结果 #${item.id}</h6>
                                    <p class="mb-1 text-muted">药品：${item.recognizedDrugs || '未识别到药品'}</p>
                                    <small class="text-muted">数量：${item.drugCount} 个</small>
                                </div>
                                <div class="col-md-4 text-end">
                                    <small class="text-muted d-block">${formatDateTime(item.recognitionTime)}</small>
                                    <div class="mt-2">
                                        <button class="btn btn-outline-primary btn-sm" onclick="event.stopPropagation(); viewDetails(${item.id})">
                                            <i class="fas fa-eye me-1"></i>查看
                                        </button>
                                        <button class="btn btn-outline-danger btn-sm ms-1" onclick="event.stopPropagation(); deleteItem(${item.id})">
                                            <i class="fas fa-trash me-1"></i>删除
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                `;
                historyList.append(historyItem);
            });
        }
        
        function viewDetails(id) {
            // 这里可以实现查看详情的功能
            showAlert(`查看识别记录 #${id} 的详细信息`, 'info');
        }
        
        function deleteItem(id) {
            if (confirm('确定要删除这条识别记录吗？')) {
                // 这里可以实现删除功能
                showAlert(`删除识别记录 #${id}`, 'success');
                loadHistory(); // 重新加载列表
            }
        }
        
        function clearHistory() {
            if (confirm('确定要清空所有识别历史吗？此操作不可恢复！')) {
                // 这里可以实现清空历史的功能
                showAlert('历史记录已清空', 'success');
                loadHistory(); // 重新加载列表
            }
        }
        
        function showAlert(message, type = 'info') {
            const alertHtml = `
                <div class="alert alert-${type} alert-dismissible fade show" role="alert">
                    ${message}
                    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                </div>
            `;
            $('.main-container').prepend(alertHtml);
            
            setTimeout(() => {
                $('.alert').alert('close');
            }, 3000);
        }
        
        function formatDateTime(dateTimeString) {
            const date = new Date(dateTimeString);
            return date.toLocaleString('zh-CN');
        }
    </script>
</body>
</html>